<template>
  <div class="dataQualityWrap">
    <div class="echartsTopWrap">
      <div style="border-bottom: 1px solid #E5E5E5;padding-bottom: 10px;">
        <span style="font-size: 13px;color: #50545D;line-height: 28px;">企业选择：</span>
        <el-radio-group v-model="searchInfo.enterpriseNo" size="mini" @change="getDataInfo()">
          <el-radio-button v-for="item in $store.state.companyInfos" :label="item.enterpriseNo" :key="item.enterpriseNo">{{item.enterpriseName}}
          </el-radio-button>
        </el-radio-group>
        <div style="display: inline-block;margin-left: 20px;">
          <span>查询时间：</span>
          <span style="display: inline-block;">
             <el-date-picker
               v-model="searchInfo.statisDate"
               @change="getDataInfo"
               style="width: 100%;"
               align="right"
               type="date"
               size="mini"
               value-format="yyyy-MM-dd"
               placeholder="选择日期"
               :picker-options="$store.state.pickerOptions0">
            </el-date-picker>

        </span>
        </div>
      </div>
      <bikeEcharts :perHour="perHour" :perHourData="perHourData"></bikeEcharts>
    </div>
    <div class="echatsBottomWrap">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="异常预警" name="first">
        </el-tab-pane>
        <el-tab-pane label="传输总量" name="second">
        </el-tab-pane>
        <el-tab-pane label="预警设置" name="third">
        </el-tab-pane>
      </el-tabs>
      <div style="position: absolute;right: 20px;top: 15px;">
        <div v-show="activeName=='first'">
          <div style="display: inline-block;line-height: 28px;vertical-align: middle;">
            <span style="display: inline-block;line-height: 28px;vertical-align: top;color: #50545D;">企业：</span>
            <span style="display: inline-block;line-height: 28px;">
          <el-select v-model="searchInfoOne.enterpriseNo" style="width: 120px;" size="mini" @change="searchRowsInfo"
                     clearable placeholder="全部">
            <el-option
              v-for="item in this.$store.state.companyInfos"
              :key="item.enterpriseNo+''"
              :label="item.enterpriseName"
              :value="item.enterpriseNo+''">
            </el-option>
          </el-select>
            </span>
          </div>
          <div style="display: inline-block;line-height: 28px;vertical-align: middle;margin-left: 20px;">
            <span style="display: inline-block;line-height: 28px;vertical-align: top;color: #50545D;">数据类别：</span>
            <span style="display: inline-block;line-height: 28px;">
          <el-select v-model="searchInfoOne.msgType" style="width: 120px;" size="mini" @change="searchRowsInfo"
                     clearable placeholder="全部">
           <el-option
             v-for="item in options"
             :key="item.value"
             :label="item.label"
             :value="item.value">
             </el-option>
          </el-select>
            </span>
          </div>
          <div
            style="display: inline-block;margin-left: 20px;line-height: 28px;vertical-align: middle;margin-top: -10px;">
            <span style="color: #50545D;">查询时间：</span>
            <span style="display: inline-block;">
             <el-date-picker
               style="width: 220px;"
               v-model="value6"
               type="daterange"
               align="left"
               clearable
               value-format="yyyy-MM-dd"
               @change="searchRowsInfo()"
               placeholder="选择日期范围"
               size="mini"
               :picker-options="$store.state.pickerOptions2">
              </el-date-picker>
        </span>
          </div>
        </div>
        <div v-show="activeName=='second'">
          <div style="display: inline-block;line-height: 28px;vertical-align: middle;">
            <span style="display: inline-block;line-height: 28px;vertical-align: top;color: #50545D;">企业：</span>
            <span style="display: inline-block;line-height: 28px;">
          <el-select v-model="searchInfoTwo.enterpriseNo" style="width: 120px;" size="mini" @change="handleClick"
                     clearable placeholder="全部">
            <el-option
              v-for="item in this.$store.state.companyInfos"
              :key="item.enterpriseNo+''"
              :label="item.enterpriseName"
              :value="item.enterpriseNo+''">
            </el-option>
          </el-select>
            </span>
          </div>
          <div style="display: inline-block;line-height: 28px;vertical-align: middle;margin-left: 20px;">
            <span style="display: inline-block;line-height: 28px;vertical-align: top;color: #50545D;">数据类别：</span>
            <span style="display: inline-block;line-height: 28px;">
          <el-select v-model="searchInfoTwo.msgType" style="width: 120px;" size="mini" @change="handleClick"
                     clearable placeholder="全部">
           <el-option
             v-for="item in options"
             :key="item.value"
             :label="item.label"
             :value="item.value">
             </el-option>
          </el-select>
            </span>
          </div>
          <div
            style="display: inline-block;margin-left: 20px;line-height: 28px;vertical-align: middle;margin-top: -10px;">
            <span style="color: #50545D;">查询时间：</span>
            <span style="display: inline-block;">
            <el-date-picker
              v-model="searchInfoTwo.statisDate"
              @change="handleClick"
              style="width: 100%;"
              align="right"
              type="date"
              size="mini"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              :picker-options="$store.state.pickerOptions0">
            </el-date-picker>
        </span>
          </div>
        </div>
        <div v-show="activeName=='third'">
          <span style="font-size: 13px;color: #50545D;line-height: 28px;">企业选择：</span>
          <el-radio-group v-model="enterpriseNo" size="mini" @change="handleClick()">
            <el-radio-button v-for="item in $store.state.companyInfos" :label="item.enterpriseNo" :key="item.enterpriseNo">{{item.enterpriseName}}
          </el-radio-button>
          </el-radio-group>
          <div v-if="$store.state.userInfo.roleLevel==1" style="display: inline-block;margin-left: 300px;">
          <el-button v-show="!isEdit" size="mini" @click="changeSave(0)">取消</el-button>
          <el-button type="primary" v-show="!isEdit"  size="mini" @click="handleSave()">保存</el-button>
          <el-button type="primary" v-show="isEdit"  size="mini" @click="changeSave(1)">编辑</el-button>
          </div>
        </div>
      </div>
      <div style="padding-bottom: 50px;">
        <div class="tableInner" v-show="activeName=='first'">
          <el-table
            ref="multipleTable"
            :data="rows"
            stripe
            :height="tableHeight"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              label="企业名称"
              prop="enterpriseName"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="数据类别"
              prop="msgType"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.msgType == 'MSG_ORDER' ? '订单信息' : scope.row.msgType == 'MSG_ORDER_TRACK' ? '订单轨迹上报' : scope.row.msgType == 'MSG_BICYCLE_SITE' ? '车辆位置上报' : ""}}


              </template>
            </el-table-column>
            <el-table-column
              label="接收数量"
              prop="receiveCount"
            >
            </el-table-column>
            <el-table-column
              label="监控时间"
              prop="monitorTime"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="预警阀值"
              prop="alarmCount"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="预警时间"
              prop="alarmTime"
              show-overflow-tooltip>
            </el-table-column>
          </el-table>
          <div class="paginationWrap" style="margin-top: 5px;">
            <el-row :gutter="10">
              <el-col :span="13" :offset="9">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="searchInfoOne.page"
                  :page-sizes="[10, 30, 50, 100,200]"
                  :page-size="searchInfoOne.rows"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="count">
                </el-pagination>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="tableInner" v-show="activeName=='second'">
          <el-table
            ref="multipleTable"
            :data="rows2"
            stripe
            :height="tableHeight+30"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              label="企业名称"
              prop="enterpriseName"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="数据类别"
              prop="msgType"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.msgType == 'MSG_ORDER' ? '订单信息' : scope.row.msgType == 'MSG_ORDER_TRACK' ? '订单轨迹上报' : scope.row.msgType == 'MSG_BICYCLE_SITE' ? '车辆位置上报' : ""}}


              </template>
            </el-table-column>
            <el-table-column
              label="上传条数"
              prop="uploadCount"
            >
            </el-table-column>
            <el-table-column
              label="上传时间"
              prop="enterpriseStatisTime"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="实际接收条数"
              prop="receiveCount"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="统计时间"
              prop="platformStatisTime"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="接收数据差值"
              prop="intervalCount"
              show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </div>
        <div class="tableInner" v-show="activeName=='third'">
          <el-table
            ref="multipleTable"
            :data="rows1"
            stripe
            :height="tableHeight+30"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              label="时间"
              prop="monitorHour"
              width="60"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.monitorHour}}:00
              </template>
            </el-table-column>
            <el-table-column
              label="位置信息数据预警值"
              prop="gnssCount"
              width="140"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <el-input clearable size="mini"  :disabled="isEdit" class="tableInput" v-model="scope.row.gnssCount" auto-complete="off" placeholder="预警值"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="订单信息数据预警值"
              prop="orderCount"
              width="140"
            >
              <template slot-scope="scope">
                <el-input clearable size="mini" :disabled="isEdit" class="tableInput" v-model="scope.row.orderCount" auto-complete="off" placeholder="预警值"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="订单轨迹信息数据预警值"
              prop="trackCount"
              width="160"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <el-input clearable size="mini" :disabled="isEdit" class="tableInput" v-model="scope.row.trackCount" auto-complete="off"  placeholder="预警值"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="告警接收号码"
              prop="mobile"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <el-input clearable size="mini" :disabled="isEdit" class="tableInput" v-model="scope.row.mobile" auto-complete="off" placeholder="告警接收号码"></el-input>
              </template>
            </el-table-column>

          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import bikeEcharts from './bikeEcharts.vue'
  export default {
    props: [],
    data(){
      return {
        activeName: "first",
        searchInfo: {
          enterpriseNo: "075501",
          statisDate: ""
        },
        options: [
          {
            value: 'MSG_ORDER',
            label: '订单信息'
          }, {
            value: 'MSG_ORDER_TRACK',
            label: '订单轨迹上报'
          }, {
            value: 'MSG_BICYCLE_SITE',
            label: '车辆位置上报'
          }],
        perHour: [],
        perHourData: [[], [], []],
        rows: [],
        rows1: [],
        rows2: [],
        value6: "",
        isEdit:true,
        count: 0,
        enterpriseNo: "075501",
        tableHeight: 200,
        searchInfoOne: {
          "enterpriseNo": "",
          "beginTime": "",
          "endTime": "",
          "msgType": "",
          "hasError": "1",
          page: 1,
          rows: 10,
        },
        searchInfoTwo: {
          "enterpriseNo":"",
          "msgType":"",
          "statisDate":""
        }
      }
    },
    components: {bikeEcharts},
    created(){

      this.searchInfo.statisDate = this.dtime().format('YYYY-MM-DD')
      this.getDataInfo()
      this.handleClick()
    },
    mounted(){
      this.$nextTick(() => {
        //表格滚动
        this.tableHeight = document.querySelector(".dataQualityWrap").clientHeight - 415
      })
    },

    methods: {

      changeSave(key){
        this.isEdit=!this.isEdit
        if(!key){
          this.rows1=[]
          this.handleClick()
        }
      },
      handleSave(){
        this.axios.post(process.env.API_HOST + `/data/updateMonitorConfig`, {"configList":this.rows1,})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.$message({
                type: 'success',
                message: '保存成功'
              });
              this.isEdit=true
              this.handleClick()
            }
          })
      },
      handleClick() {
        if (this.activeName == "first") {
          this.searchRowsInfo()
        } else if (this.activeName == "second") {
          this.axios.post(process.env.API_HOST + `/data/getMonitorDataGrid`, this.searchInfoTwo)
            .then(response => {
              const result = response.data
              if (result.code == 200) {
                this.rows2 = result.rows
              }
            })
        } else if (this.activeName == "third") {
          this.axios.post(process.env.API_HOST + `/data/selectMonitorConfig`, {"enterpriseNo":this.enterpriseNo,})
            .then(response => {
              const result = response.data
              this.rows1=[]
              let arr=[]
              for(var i=0;i<24;i++){
                arr.push({
                  monitorHour:i,
                  "enterpriseNo": this.enterpriseNo,
                  "gnssCount": "",
                  "orderCount": "",
                  "trackCount":"",
                  "mobile": "",})
              }
              if (result.code == 200&&result.result.length>0) {
                result.result.forEach(item=>{
                  arr[item.monitorHour-0]=item
                })
              }
              this.rows1=arr
            })
        }
      },
      getDataInfo(){
        this.axios.post(process.env.API_HOST + `/data/getDataTransferChart`, this.searchInfo)
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.perHour = ['0:00','1:00','2:00','3:00','4:00','5:00','6:00','7:00','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00']
              this.perHourData = [[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]]
              if (result.result.length > 0) {
                result.result.forEach(item => {
                  // this.perHour.push(item.monitorHour)
                  if (item.msgType == "MSG_BICYCLE_SITE") {
                    this.perHourData[0][item.monitorHour]=item.receiveCount
                  } else if (item.msgType == "MSG_ORDER") {
                    // this.perHourData[1].push(item.receiveCount)
                    this.perHourData[1][item.monitorHour]=item.receiveCount
                  } else if (item.msgType == "MSG_ORDER_TRACK") {
                    this.perHourData[2][item.monitorHour]=item.receiveCount
                    // this.perHourData[2].push(item.receiveCount)
                  }
                })
                this.perHour = this.unique(this.perHour)
              }/* else {
                this.perHour = ['1:00','2:00','3:00','4:00','5:00','6:00','7:00','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','24:00']
                this.perHourData = [[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]]
              }*/

            }
          })
      },
      unique(arr) {
        return Array.from(new Set(arr))
      },
      //获取所有信息
      searchRowsInfo(val) {
        val?"":this.searchInfoOne.page==1
        if (this.value6 && this.value6[0] != null) {
          this.searchInfoOne.beginTime = this.dtime(this.value6[0]).format('YYYY-MM-DD 00:00:00')
          this.searchInfoOne.endTime = this.dtime(this.value6[1]).format('YYYY-MM-DD 23:59:59')
        } else {
          this.searchInfoOne.beginTime = ""
          this.searchInfoOne.endTime = ""
        }
        this.axios.post(process.env.API_HOST + `/data/selectAlarmGrid`, this.searchInfoOne)
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.rows = result.rows
              this.count = result.total;
            }
          })
      },
      handleSizeChange(val){
        this.searchInfoOne.rows = val
        this.searchRowsInfo()
      },
      handleCurrentChange(val){
        this.searchInfoOne.page = val;
        this.searchRowsInfo(val)
      },
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .dataQualityWrap
    page()
    background-color #EFEEF3
    .el-radio-button
      margin-right 10px
    .el-radio-button__inner
      border-radius 10px !important
      padding 5px 15px
      margin-right 10px
      border: 1px solid #dcdfe6 !important
    .is-checked
      .el-radio-button__inner
        background-color: #3975FE
        border-radius 10px !important
        border-color #3975FE
    .echartsTopWrap
      background-color white
      border-radius 5px
      height 300px
      padding 20px
      box-sizing border-box
    .echatsBottomWrap
      position relative
      background-color: white;
      padding: 10px 20px 20px 20px;
      border-radius: 4px;
      margin-top: 10px
      .el-tabs__item.is-active
        color: #3975FE;
      .el-tabs__active-bar
        background-color #3975FE !important


</style>
